/*
 * @Author: nengwu 409791297@qq.com
 * @Date: 2020-07-01 23:16:30
 * @LastEditors: mylesshie@gmail.com
 * @LastEditTime: 2020-08-15 21:57:02
 * @description:
 */

import React, { useState, useEffect, useRef } from 'react'
import { useDispatch } from 'react-redux'
import { View, ScrollView, Image, SafeAreaView } from 'react-native'
import { Button, Text, Toast } from 'native-base'
import { Input } from 'react-native-elements'
import { useNavigation } from '@react-navigation/native'
import styles from './styles'
import * as userActions from '@/actions/user'
const logo = require('@/assets/images/logo-large.png')

const Registe = props => {
  const navigation = useNavigation()
  const dispatch = useDispatch()

  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [macCode, setMacCode] = useState('')
  const [count, setCount] = useState(0)
  const [isGetCode, setIsGetCode] = useState(false)
  const [btnDisable, setBtnDisable] = useState(false)
  const countRef = useRef(0)

  let timer = null

  useEffect(() => {
    return () => {
      timer && clearTimeout(timer)
      timer = null
    }
  }, [])

  const _onChangeText = (text, type) => {
    if (type === 'username') {
      setUsername(text)
    }
    if (type === 'password') {
      setPassword(text)
    }
    if (type === 'macCode') {
      setMacCode(text)
    }
  }

  // 倒计时
  const _countDown = () => {
    setCount(countRef.current)
    if (countRef.current <= 0) return
    timer = setTimeout(() => {
      countRef.current -= 1
      _countDown()
    }, 1000)
  }

  const _getMsgCode = () => {
    if (count) return
    if (!username) {
      return Toast.show({
        text: '请先输入手机号',
        duration: 1500
      })
    }
    dispatch(userActions.registeSendCode(username)).then(() => {
      setIsGetCode(true)
      countRef.current = 60
      _countDown()
    })
  }

  const _submit = () => {
    if (btnDisable) return
    if (!username || !macCode || !password) {
      return Toast.show({
        text: '请输入注册信息',
        duration: 1500
      })
    }
    if (!isGetCode) {
      return Toast.show({
        text: '请先获取验证码',
        duration: 1500
      })
    }
    setBtnDisable(true)
    dispatch(userActions.registe(username, password, macCode))
      .then(() => {
        Toast.show({
          text: '注册成功，请登录',
          duration: 1500
        })
        setTimeout(() => {
          navigation.navigate('Login')
        }, 1500)
        setBtnDisable(false)
      })
      .catch(() => {
        setBtnDisable(false)
      })
  }

  const _goLogin = () => {
    navigation.navigate('Login')
  }

  return (
    <>
      {/* <StatusBar barStyle="dark-content" backgroundColor="#fff"/> */}
      {/* <Headers title="用户注册" leftComponent={null} /> */}
      <SafeAreaView style={styles.wrap}>
        <ScrollView
          style={styles.container}
          contentInsetAdjustmentBehavior="automatic"
        >
          <View style={styles.top}>
            <Image source={logo} style={styles.logo} />
          </View>
          <View style={styles.formWrap}>
            <View style={styles.inputWrap}>
              <Input
                placeholder="请输入手机号"
                value={username}
                maxLength={11}
                onChangeText={text => _onChangeText(text, 'username')}
              />
              <Input
                placeholder="请输入密码"
                maxLength={16}
                value={password}
                onChangeText={text => _onChangeText(text, 'password')}
              />
              <Input
                placeholder="请输入验证码"
                maxLength={6}
                value={macCode}
                onChangeText={text => _onChangeText(text, 'macCode')}
                rightIcon={
                  count > 0 ? (
                    <Button transparent style={styles.smsBtn} disabled>
                      <Text style={styles.smsBtnDisable}>
                        {countRef.current}s后重新获取
                      </Text>
                    </Button>
                  ) : (
                    <Button
                      transparent
                      style={styles.smsBtn}
                      onPress={_getMsgCode}
                    >
                      <Text style={styles.smsBtnText}>获取验证码</Text>
                    </Button>
                  )
                }
              />
            </View>
          </View>
          <Button rounded block style={styles.loginBtn} onPress={_submit}>
            <Text style={styles.btnText}>注册</Text>
          </Button>
          <Button transparent style={styles.registBtn} onPress={_goLogin}>
            <Text style={styles.registText}>去登录</Text>
          </Button>
        </ScrollView>
      </SafeAreaView>
    </>
  )
}

export default Registe
